<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: layout(~{::title}, ~{::section})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZlibLike - 电子书共享平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.0.0/css/all.min.css">
    <style>
        .banner {
            background-color: #f8f9fa;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        .book-card {
            margin-bottom: 1.5rem;
            height: 100%;
            transition: transform 0.3s;
        }
        .book-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .book-cover {
            height: 200px;
            object-fit: contain;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
        }
        .category-title {
            border-bottom: 2px solid #007bff;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            margin-top: 2rem;
        }
        .nav-tabs .nav-link {
            border: none;
            color: #495057;
            font-weight: 500;
        }
        .nav-tabs .nav-link.active {
            color: #007bff;
            border-bottom: 2px solid #007bff;
        }
        .search-container {
            max-width: 600px;
            margin: 0 auto;
        }
        #popularBooks .card {
            transition: transform 0.3s;
        }
        #popularBooks .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .popularity-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(255, 193, 7, 0.9);
            color: #000;
            font-weight: bold;
            padding: 0.25rem 0.5rem;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <!-- 公共头部 -->
    <header th:replace="layout/base :: header"></header>

    <!-- 搜索区域 -->
    <section class="banner">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h1 class="display-4 mb-4">寻找您喜爱的电子书</h1>
                    <p class="lead mb-4">从超过100万本电子书中发现适合您的阅读内容</p>
                    <div class="search-container">
                        <form action="/search" method="get">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control form-control-lg" 
                                       placeholder="搜索书名、作者、ISBN..." name="query">
                                <button class="btn btn-primary btn-lg" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 最受欢迎的书籍 -->
    <section class="container mb-5">
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="category-title">
                    <i class="fas fa-fire text-danger"></i> 热门书籍
                    <a href="/books/popular" class="btn btn-sm btn-outline-primary float-end">查看更多</a>
                </h2>
            </div>
        </div>
        <div class="row" id="popularBooks">
            <div class="col-12 text-center py-5" id="popularBooksLoading">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">正在加载热门书籍...</p>
            </div>
        </div>
    </section>

    <!-- 按分类浏览 -->
    <section class="container mb-5">
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="category-title">
                    <i class="fas fa-th-large"></i> 按分类浏览
                    <a href="/categories" class="btn btn-sm btn-outline-primary float-end">查看全部分类</a>
                </h2>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-6 mb-4">
                <a href="/search?category=1" class="text-decoration-none">
                    <div class="card h-100 book-card">
                        <div class="card-body text-center">
                            <i class="fas fa-laptop fa-3x text-primary mb-3"></i>
                            <h5 class="card-title">计算机科学</h5>
                            <p class="card-text text-muted">5000+ 本</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <a href="/search?category=2" class="text-decoration-none">
                    <div class="card h-100 book-card">
                        <div class="card-body text-center">
                            <i class="fas fa-book fa-3x text-success mb-3"></i>
                            <h5 class="card-title">文学</h5>
                            <p class="card-text text-muted">8500+ 本</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <a href="/search?category=3" class="text-decoration-none">
                    <div class="card h-100 book-card">
                        <div class="card-body text-center">
                            <i class="fas fa-flask fa-3x text-danger mb-3"></i>
                            <h5 class="card-title">科学与技术</h5>
                            <p class="card-text text-muted">3200+ 本</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-md-3 col-sm-6 mb-4">
                <a href="/search?category=4" class="text-decoration-none">
                    <div class="card h-100 book-card">
                        <div class="card-body text-center">
                            <i class="fas fa-briefcase fa-3x text-warning mb-3"></i>
                            <h5 class="card-title">商业与经济</h5>
                            <p class="card-text text-muted">4100+ 本</p>
                        </div>
                    </div>
                </a>
            </div>
            <!-- 更多分类 -->
        </div>
    </section>

    <!-- 最新上传 -->
    <section class="container mb-5">
        <div class="row mb-4">
            <div class="col-12">
                <h2 class="category-title">
                    <i class="fas fa-clock"></i> 最新上传
                    <a href="/books/latest" class="btn btn-sm btn-outline-primary float-end">查看更多</a>
                </h2>
            </div>
        </div>
        <div class="row">
            <!-- 书籍卡片 -->
            <div class="col-lg-2 col-md-3 col-sm-6 mb-4">
                <div class="card h-100 book-card">
                    <img src="https://via.placeholder.com/150x200" class="card-img-top book-cover" alt="Book Cover">
                    <div class="card-body">
                        <h6 class="card-title text-truncate">Java编程思想（第4版）</h6>
                        <p class="card-text small text-truncate">Bruce Eckel</p>
                    </div>
                    <div class="card-footer bg-white">
                        <small class="text-muted">PDF, EPUB</small>
                    </div>
                </div>
            </div>
            <!-- 更多书籍卡片 -->
        </div>
    </section>

    <!-- 统计数据 -->
    <section class="bg-light py-5 mb-5">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3 col-6 mb-3">
                    <i class="fas fa-book fa-2x text-primary mb-2"></i>
                    <h2 class="mb-1">100万+</h2>
                    <p class="mb-0">电子书</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <i class="fas fa-users fa-2x text-success mb-2"></i>
                    <h2 class="mb-1">50万+</h2>
                    <p class="mb-0">用户</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <i class="fas fa-download fa-2x text-danger mb-2"></i>
                    <h2 class="mb-1">500万+</h2>
                    <p class="mb-0">下载</p>
                </div>
                <div class="col-md-3 col-6 mb-3">
                    <i class="fas fa-list fa-2x text-warning mb-2"></i>
                    <h2 class="mb-1">10万+</h2>
                    <p class="mb-0">书单</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 公共尾部 -->
    <footer th:replace="layout/base :: footer"></footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 加载热门书籍
            loadPopularBooks();
        });
        
        function loadPopularBooks() {
            fetch('/api/book/popular?limit=6')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.code === 200 && data.data) {
                        displayPopularBooks(data.data);
                    } else {
                        throw new Error(data.message || '获取数据失败');
                    }
                })
                .catch(error => {
                    console.error('获取热门书籍失败:', error);
                    document.getElementById('popularBooksLoading').innerHTML = 
                        '<div class="alert alert-danger">加载热门书籍失败: ' + error.message + '</div>';
                });
        }
        
        function displayPopularBooks(books) {
            const container = document.getElementById('popularBooks');
            container.innerHTML = '';
            
            if (!books || books.length === 0) {
                container.innerHTML = '<div class="col-12 text-center py-3"><p>暂无热门书籍数据</p></div>';
                return;
            }
            
            books.forEach((book, index) => {
                const card = document.createElement('div');
                card.className = 'col-lg-2 col-md-4 col-sm-6 mb-4';
                
                const coverUrl = book.coverUrl || 'https://via.placeholder.com/150x200?text=No+Cover';
                
                card.innerHTML = `
                    <div class="card h-100 book-card position-relative">
                        <div class="popularity-badge">热度: ${book.popularity || 0}</div>
                        <img src="${coverUrl}" class="card-img-top book-cover" alt="${book.title}">
                        <div class="card-body">
                            <h6 class="card-title text-truncate">${book.title}</h6>
                            <p class="card-text small text-truncate">${book.author || '未知作者'}</p>
                        </div>
                        <div class="card-footer bg-white">
                            <small class="text-muted">${(book.availableFormats || []).join(', ') || '未知格式'}</small>
                        </div>
                    </div>
                `;
                
                const bookLink = document.createElement('a');
                bookLink.href = `/book/${book.bookId}`;
                bookLink.className = 'text-decoration-none text-dark';
                bookLink.appendChild(card.querySelector('.card'));
                
                card.innerHTML = '';
                card.appendChild(bookLink);
                
                container.appendChild(card);
            });
        }
    </script>
</body>
</html> 